import React, { useRef, useState } from 'react'

interface DanmakuControlProps {
    onSend: (payload: { text: string; color?: string; fontSize?: number; speed?: number }) => void
    speed?: number
    onSpeedChange?: (value: number) => void
    enabled?: boolean
    onToggleEnabled?: () => void
}

const EMOJIS = ['😀', '😂', '🤣', '😊', '😍', '👍', '👏', '🔥', '🌟', '🚀', '❤️', '🎉']

const DanmakuControl: React.FC<DanmakuControlProps> = ({ onSend, speed = 3, onSpeedChange, enabled = true, onToggleEnabled }) => {
    const [text, setText] = useState('')
    const [color, setColor] = useState('#ffffff')
    const [fontSize, setFontSize] = useState(18)
    const inputRef = useRef<HTMLInputElement>(null)
    const [showEmojiPanel, setShowEmojiPanel] = useState(false)

    const handleInsertEmoji = (emoji: string) => {
        if (!inputRef.current) return
        const start = inputRef.current.selectionStart || 0
        const end = inputRef.current.selectionEnd || 0
        const newText = text.slice(0, start) + emoji + text.slice(end)
        setText(newText)
        // 将光标移到表情后
        requestAnimationFrame(() => {
            if (!inputRef.current) return
            const pos = start + emoji.length
            inputRef.current.selectionStart = pos
            inputRef.current.selectionEnd = pos
            inputRef.current.focus()
        })
    }

    const handleSend = () => {
        const trimmed = text.trim()
        if (!trimmed || !enabled) return
        onSend({ text: trimmed, color, fontSize, speed })
        setText('')
    }

    const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
        if (e.key === 'Enter') {
            e.preventDefault()
            handleSend()
        }
    }

    const allEmojis = EMOJIS

    return (
        <div className="danmaku-control">
            <div className="danmaku-send-panel danmaku-one-line">
                <button type="button" className="danmaku-toggle-btn" onClick={onToggleEnabled}>
                    {enabled ? '关闭弹幕' : '开启弹幕'}
                </button>
                <div className="input-group">
                    <input
                        ref={inputRef}
                        type="text"
                        value={text}
                        onChange={(e) => setText(e.target.value)}
                        placeholder="发个弹幕吧..."
                        disabled={!enabled}
                        onKeyDown={handleKeyDown}
                    />

                    <div className="emoji-inline">
                        <button type="button" className="emoji-toggle" onClick={() => enabled && setShowEmojiPanel(v => !v)} title="表情" disabled={!enabled}>😊</button>
                        {showEmojiPanel && (
                            <div className="emoji-dropdown">
                                {allEmojis.map(e => (
                                    <button key={e} type="button" onClick={() => { handleInsertEmoji(e); setShowEmojiPanel(false) }} className="emoji-btn">
                                        {e}
                                    </button>
                                ))}
                            </div>
                        )}
                    </div>

                    <button className="send-btn" onClick={handleSend} disabled={!enabled}>发送弹幕</button>
                </div>

                <div className="danmaku-style-controls">
                    <input type="color" value={color} onChange={(e) => setColor(e.target.value)} />

                    <select value={fontSize} onChange={(e) => setFontSize(Number(e.target.value))}>
                        {[14, 16, 18, 20, 22, 24].map(s => (
                            <option key={s} value={s}>{s}px</option>
                        ))}
                    </select>

                    <label className="speed-label">
                        <span>速度</span>
                        <input type="range" min={1} max={5} step={1} value={speed} onChange={(e) => onSpeedChange?.(Number(e.target.value))} />
                    </label>
                </div>
            </div>
        </div>
    )
}

export default DanmakuControl


